How it works...
By making use of the MapView component provided by Expo, the implementation
of a map in your React Native app is now a much simpler and straightforward
process than it once was.
In step 3, we made use of the Permissions helper library. Permissions has a method
called askAsync, which takes one parameter defining what type of permissions
your app would like to request from the user. Permissions also has constants for
each type of permission you can request from the user. These permission types
include LOCATION, NOTIFICATIONS (which we'll use later in this chapter), CAMERA,
AUDIO_RECORDING, CONTACTS, CAMERA_ROLL, and CALENDAR. Since we need the location in this
recipe, we passed in the constant Permissions.LOCATION. Once the askAsync return
promise resolves, the return object will have a status property and an expiration
property. If the user has allowed the requested permission, status will be set to
the 'granted'string. If granted, we will fire off our getLocation method.
In step 4, we defined the function that gets the location from the device's GPS.
We call the getCurrentPositionAsync method of the Location component. This method
will return an object with a coords property and a timestamp property. The coords
property gives us access to the latitude and longitude, as well as the altitude,
accuracy (radius of uncertainty for the location, measured in meters),
altitudeAccuracy (accuracy of the altitude value, in meters (iOS only)), heading, and
speed. Once received, we save the location to state so that the render function will
be called, and our map will be rendered.
In step 5, we defined the renderMap method to render the map. First, we check
whether there is a location, and if there is, we render the MapView element. This
element only requires us to define the value for one property: initialRegion. This
property takes an object with four properties: latitude, longitude, latitudeDelta, and
longitudeDelta. We set the latitude and longitude equal to those in the state object,
and provide initial values for latitudeDelta and longitudeDelta. These last two
properties dictate the initial zoom level that the map should be rendered at; the
larger this number is, the more zoomed out the map will be. I suggest
experimenting with these two values to see how they affect the rendered map.